<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <MTitle class="title">
        <template #left>
          历史记录
        </template>
      </MTitle>
      <MTag v-for="(obj, index) in tagItems" :key="index">{{ obj }}</MTag>
      <MTitle class="title1">
        <template #left>
          正在赋码
        </template>
      </MTitle>
      <div v-if="nowCode.length > 0">
        <MTag v-for="(obj, index) in nowCode" :key="index">{{ obj }}</MTag>
      </div>

    </main>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../components/MBreadcrumb.vue"
import MTitle from "../components/MTitle.vue"
import MTag from "../components/MTag.vue"
import axios from "../axios/axios"
export default {
  name: "CodeRecords",
  components: {
    MBreadcrumb,
    MTitle,
    MTag
    //MIcon
  },
  setup() {
    //const userId = "12121"
    const userId = ref("")
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '赋码记录',
        }
      })
    const tagItems = ref([])
    const params = ref([])
    const nowCode = ref([])
    //tagItems.value = ["MA.166.231.123/10.25452312.001/20240903AA0001SADF1F", "MA.166.231.123/10.25452312.001/20240903AA0001SADF1F"]
    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('AppId')) {
        axios.get("/code/select?userId=" + param.get('userId') + "&trainingId=" + param.get("trainingId") + "&appId=" + param.get("AppId")).then(res => {
          const dataList = []
          res.data.Data.forEach(element => {
            dataList.push(element.codeinfo)
          });
          tagItems.value = dataList

          if (param.get("code") != null) {
            nowCode.value = param.get("code").split(",")
          }

        })
      }
      if (param.has('userId')) {
        userId.value = param.get('userId');
      }
    });
    return {
      breadcrumbItem,
      tagItems,
      nowCode
    };
  },
};
</script>

<style scoped>
.title {
  margin-top: 30px;
}

.title1 {
  margin-top: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  text-align: center;
  height: 10%;
}

main {
  flex: 1;
}
</style>
